<template>
  <el-col :span="Number(colspan)">
    <el-form-item
      :prop="name"
      :label-width="labelWidth + 'px'"
      :label="label"
      :title="label"
      v-show="property.p.indexOf('H') === -1"
    >
      <el-date-picker
        :format="format"
        :disabled="property.p.indexOf('D') >= 0"
        :type="type"
        :placeholder="placeholder"
        :value-format="valueFormat"
        :id="'date' + name"
        v-model="date"
        style="width: 100%;"
        @change="onChange"
        @blur="onBlur"
        @focus="onFocus"
        :name="name"
        :data-value="property.value"
        :data-p="property.p"
      ></el-date-picker>
    </el-form-item>
  </el-col>
</template>

<script type="es6">
import moment from "moment";

export default {
  props: {
    colspan: {
      type: String,
      default: "24"
    },
    labelWidth: {
      type: String,
      default: "140"
    },
    label: {
      type: String,
      default: ""
    },
    placeholder: {
      type: String,
      default: ""
    },
    type: {
      type: String,
      default: function() {
        return "datetime";
      }
    },
    format: {
      type: String,
      default: function() {
        return "yyyy-MM-dd HH:mm";
      }
    },
    valueFormat: {
      type: String,
      default: function() {
        return "";
      }
    },
    property: {
      type: Object,
      default: function() {
        return {
          value: "",
          p: ""
        };
      }
    },
    name: {
      type: String,
      default: ""
    },
    datas: {
      type: Object,
      default: null
    },
    isChange: {
      type: Boolean,
      default: false
    },
    isClick: {
      type: Boolean,
      default: false
    },
    isBlur: {
      type: Boolean,
      default: false
    },
    isFocus: {
      type: Boolean,
      default: false
    },
    isRed: {
      type: Boolean,
      default: false
    },
    isCodeType: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      date: ""
    };
  },
  computed: {
    codeTypes() {
      return this.$store.getters.codeTypes;
    }
  },
  watch: {
    "property.value": {
      handler(value) {
        this.date = this.utils.DateToConver(value);
        return this.utils.DateToConver(value);
      }
    }
  },
  mounted() {
    this.date = this.utils.DateToConver(this.property.value);
    this.property.value = this.utils.DateToConver(this.property.value);
    document.getElementById("date" + this.name).style.color = this.isRed
      ? "red"
      : "";
  },
  methods: {
    /**
     * 点击事件
     */
    onClick() {
      if (!this.isClick) return;
      let obj = {
        path: this.$route.path + "/doQuery/" + this.name,
        params: {
          path: this.$route.path,
          ...this.datas
        }
      };
      this.$store.dispatch("SET_COMMONPOST", obj);
    },
    /**
     * 选择事件
     */
    onChange(val) {
      this.date = val;
      this.property.value = val;
      
      // if (!this.isChange) return;
      // let obj = {
      //     path: this.$route.path + '/doCheck/' + this.name,
      //     params: {
      //         path: this.$route.path,
      //         ...this.datas
      //     }
      // };
      if (this.isCodeType) {
        obj.params.codeTypes = this.codeTypes;
      }
      // console.log(val)
      // this.$store.dispatch('SET_COMMONPOST', obj);
    },
    /**
     * 失去焦点
     */
    onBlur() {
      if (!this.isBlur) return;
      let obj = {
        path: this.$route.path + "/blur/" + this.name,
        params: {
          path: this.$route.path,
          ...this.datas
        }
      };
      this.$store.dispatch("SET_COMMONPOST", obj);
    },
    /**
     * 获取焦点
     */
    onFocus() {
      if (!this.isFocus) return;
      let obj = {
        path: this.$route.path + "/focus/" + this.name,
        params: {
          path: this.$route.path,
          ...this.datas
        }
      };
      this.$store.dispatch("SET_COMMONPOST", obj);
    }
  }
};
</script>